import { Layout, Breadcrumb } from 'antd';
import BaseHeader from '@/components/common/BaseHeader';
import BaseLeftMenu from '@/components/common/BaseLeftMenu';
import { FCRoute } from '@/router/index';

const { Content } = Layout;

const LayoutBasic: FCRoute = (props) => {
  const { children } = props;

  return (
    <Layout style={{ height: '100%' }}>
      <BaseHeader />
      <Layout>
        <BaseLeftMenu />

        <Layout style={{ padding: '0 24px 24px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            Content:
            {children}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};
export default LayoutBasic;
